
<template>
<el-container id="bg">

  <el-aside width="200px"><!-- //侧边栏 -->
    <el-menu :default-openeds="['1', '3']"><!-- //菜单栏 -->

      <el-submenu index="1"><!-- //游戏商城 -->

        <template slot="title"><i class="el-icon-message"></i>游戏商城</template>

        <el-menu-item-group>

          <template slot="title">热门游戏</template>

          <el-menu-item index="1-1"><router-link to="/game"
              style="text-decoration:none">冒险</router-link></el-menu-item>

          <el-menu-item index="1-2"><router-link to="/emp"
              style="text-decoration:none">闯关</router-link></el-menu-item>

        </el-menu-item-group>

        <el-menu-item-group title="单人游戏">

          <el-menu-item index="1-3"><router-link to="/emp"
              style="text-decoration:none">休闲</router-link></el-menu-item>

        </el-menu-item-group>

        <el-menu-item-group title="小游戏">

          <el-menu-item index="1-4"><router-link to="/emp"
              style="text-decoration:none">小游戏</router-link></el-menu-item>

        </el-menu-item-group>

      </el-submenu>

      <el-submenu index="2"><!-- //游戏管理 -->

        <template slot="title"><i class="el-icon-message"></i>游戏管理</template>

        <el-menu-item-group>

          <el-menu-item index="2-1"><router-link to="/dept"
              style="text-decoration:none">游戏库管理</router-link></el-menu-item>

          <el-menu-item index="2-2"><router-link to="/emp"
              style="text-decoration:none">收藏管理</router-link></el-menu-item>

          <el-menu-item index="2-3"><router-link to="/emp"
              style="text-decoration:none">分类管理</router-link></el-menu-item>

        </el-menu-item-group>

      </el-submenu>

    </el-menu>
  </el-aside>



  <el-container><!-- //主体内容 -->

    <el-header>
          

      <!--  <label for="setting">
         <el-avatar
         :size=60
           :src="user.image "></el-avatar></label>
           
       <span style="margin-left: 10px; font-size:20px;top:0px;position:relative;color:pink;">{{user.name}}</span> -->


       <el-dropdown style="float:left;">
         
         <label for="setting">
           <el-avatar
           :size=55
             :src="user.image"></el-avatar>
             
         <span style="margin-left: 10px; font-size:20px;top:0px;position:relative;color:pink;">{{ user.name }}</span>
         <i class="el-icon-setting" ></i>

         <el-dropdown-menu   slot="dropdown" id="setting">

           <el-dropdown-item ><div @click="userEdit()">个人信息</div>
             </el-dropdown-item>

           <el-dropdown-item><router-link to="/" style="text-decoration:none">退出登录</router-link></el-dropdown-item>

           <el-dropdown-item>修改密码</el-dropdown-item>

         </el-dropdown-menu>

       </label>
       </el-dropdown>



       <!-- <div style="float:left;color:black ">游戏服务管理系统</div> -->
       <div  class="lg-word" :class="[wordFlag ? 'lg-done' : '']">
        
         <span class="w-base">游</span>
         <span class="w-base">戏</span>
         <span class="w-base">服</span>
         <span class="w-base">务</span>
         <span class="w-base">管</span>
         <span class="w-base">理</span>
         <span class="w-base">系</span>
         <span class="w-base">统</span>
        
       </div>

       

       

     </el-header> 

     <el-main><!-- //主体内容 -->
          
      <el-form :inline="true" :model="searchForm" class="demo-form-inline">
        <br><br>
        <el-form-item label="游戏名" class="game-label">
          
          <el-input v-model="searchForm.game_name" placeholder="游戏名"></el-input>
        </el-form-item>


        <el-form-item label="游戏类型" class="game-label">

          <el-input v-model="searchForm.category" placeholder="游戏类型"></el-input>

        </el-form-item>



        <el-form-item label="发行日期" class="game-label">
          <el-date-picker v-model="release_date" 
          clearable
          value-format="yyyy-MM-dd"
          type="daterange"
          placeholder="选择日期"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          style="width: 400px; margin-left: 20px"
        ></el-date-picker>
      </el-form-item>




        <el-form-item>
          <el-button type="warning" @click="onSubmit()">搜索</el-button>
        </el-form-item>

        <el-button type="info" @click="clear">清空</el-button>


        <el-form-item>
          <el-button type="primary" @click="add()" style="margin-left: 1050px">新增</el-button>
        </el-form-item>


      </el-form>


      <div class="table-container">
      <el-table :data="tableData" style="width: 100%; " border>
        <el-table-column prop="game_name" label="游戏名" width="180"> </el-table-column>
        

        <el-table-column  label="图片">
          <template v-slot="scope">
            <el-image
              style="width: 140px; height: 100px; border-radius: 0%"
              :src="'http://47.99.51.143:9000/files/' + scope.row.game_image"
              :preview-src-list="['http://47.99.51.143:9000/files/' + scope.row.game_image]"
            ></el-image>
          </template>
        </el-table-column>








        
        
        

        <el-table-column prop="is_purchased" label="是否购买" width="140">
          <template slot-scope="scope">
            {{ scope.row.is_purchased == 1 ? '已购买' : '未购买' }}
          </template>
        </el-table-column>

        <el-table-column prop="game_description" label="游戏描述"> </el-table-column>
        <el-table-column prop="release_date" label="发行日期"> </el-table-column>
        <el-table-column prop="category" label="种类"> </el-table-column>

        <el-table-column label="操作" width="200">
          <template slot-scope="scope">

            <el-button type="primary" size="medium"> <router-link to="/shop"
                style="text-decoration:none">详情页</router-link></el-button>

           <!--  <el-button size="mini" @click="handleDelete(scope.row.id)">删除</el-button> -->
              &nbsp;&nbsp;
           
            <el-popconfirm
             confirm-button-text='好的'
            cancel-button-text='不用了'
            icon="el-icon-info"
            icon-color="red"
            title="这是一段内容确定删除吗？"
            @confirm="handleDelete(scope.row.id)"
          >
            <el-button slot="reference" >删除</el-button>
          </el-popconfirm>
        



            <br><br>
            <el-button type="primary" size="medium"  @click="edit(scope.row)">编辑</el-button>

          </template>
        </el-table-column>

      </el-table>
      </div>

     
        <el-dialog title="信息修改" :visible.sync="dialogFormVisible" width="30%">
          <el-form :model="form">
            <el-form-item label="游戏名" prop="game_name" label-width="15%">
          <el-input 
          v-model="form.game_name"
          autocomplete="off"
          > </el-input></el-form-item>




            <el-form-item label="图片" label-width="15%">
              <el-upload
                class="avatar-uploader"
                :show-file-list="false"
                action="http://47.99.51.143:9000/files/upload"
                :on-success="successUpload"
              
                style="float: left; margin-left: 20px"
              >
              <img v-if="form.game_image" :src="'http://47.99.51.143:9000/files/' + form.game_image" class="avatar">

               <i v-else class="el-icon-plus avatar-uploader-icon"></i>
               

                <el-button size="small" type="primary">点击上传</el-button>
              </el-upload>
            </el-form-item>



            






            <!-- <el-form-item label="是否购买" prop="is_purchased" label-width="15%">
              <el-input 
              v-model="form.is_purchased"
              autocomplete="off"
              > </el-input></el-form-item> -->

              <el-form-item label="是否购买" prop="is_purchased" label-width="15%">
                <el-select v-model="form.is_purchased" placeholder="请选择" style="width:100%" >
                   <el-option
                    v-for="item in genderList"
                    :key="item.value"
                    :label="item.name"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>





              <el-form-item label="游戏描述" prop="game_description" label-width="15%">
                <el-input 
                v-model="form.game_description"
                autocomplete="off"
                > </el-input></el-form-item>
                <el-form-item label="发行日期" prop="release_date" label-width="15%">
                  <el-input 
                  v-model="form.release_date"
                  autocomplete="off"
                  > </el-input></el-form-item>



                  <el-form-item label="种类" prop="category" label-width="15%">
                    <el-input 
                    v-model="form.category"
                    autocomplete="off"
                    > </el-input></el-form-item>
          </el-form>





          <div slot="footer" class="dialog-footer">
            <el-button type="info" @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="submit()">确 定</el-button>
          </div>
        </el-dialog>


      
        <!-- //个人信息修改表单 -->
        <el-dialog title="个人信息修改" :visible.sync="userFormVisible" width="30%">
          <el-form :model="userform">
            <el-form-item label="账户名" prop="name" label-width="15%">
          <el-input
          v-model="userform.name"
          autocomplete="off"
          > </el-input></el-form-item>

          <el-form-item label="昵称" prop="pet" label-width="15%">
            <el-input 
            v-model="userform.pet"
            autocomplete="off"
            > </el-input></el-form-item>




            <!-- <el-form-item label="头像" label-width="15%">
              <el-upload
                class="avatar-uploader"
                :show-file-list="false"
                action="http://47.99.51.143:9000/files/upload"
                :on-success="successUserUpload"
              
                style="float: left; margin-left: 20px"
              >
              <img v-if="userform.image" :src="'http://47.99.51.143:9000/files' + userform.image" class="avatar">

               <i v-else class="el-icon-plus avatar-uploader-icon"></i>
               

                <el-button size="small" type="primary">点击上传</el-button>
              </el-upload>
            </el-form-item> -->


            <el-form-item label="头像" >
              <el-upload
                class="avatar-uploader"
                action="http://47.99.51.143:9000/upload"
                
                name="image"
                :show-file-list="false"
                :on-success="successUserUpload"
                :before-upload="beforeAvatarUpload"
              >
                <img v-if="userform.image" :src="userform.image" class="avatar" />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                <el-button size="small" type="primary">点击上传</el-button>
              </el-upload>
            </el-form-item>
            






           <!--  <el-form-item label="性别" prop="gender" label-width="15%">
              <el-input 
              v-model="userform.gender"
              autocomplete="off"
              >  </el-input></el-form-item> -->


              <el-form-item label="性别" prop="gender" label-width="15%">
                <el-select v-model="userform.gender" placeholder="请选择" style="width:100%" >
                   <el-option
                    v-for="item in genderList"
                    :key="item.value"
                    :label="item.name"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>


              <el-form-item label="手机号" prop="phone" label-width="15%">
                <el-input 
                v-model="userform.phone"
                autocomplete="off"
                > </el-input></el-form-item>
               
                <el-form-item label="邮箱" prop="email" label-width="15%">
                  <el-input 
                  v-model="userform.email"
                  autocomplete="off"
                  > </el-input></el-form-item>



                  
          </el-form>





          <div slot="footer" class="dialog-footer">
            <el-button @click="userFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="userSubmit()">确 定</el-button>
          </div>
        </el-dialog>








    
  </el-main>

    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :background="background"
        :current-page="currentPage"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="5"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalCount">
      </el-pagination>


  </el-container>


</el-container>

</template>




<script>
import request from '@/request/request.js';


export default {
  data() {
    return {
      wordFlag: false,
      user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {},
      background: true,
      // 每页显示的条数
      pageSize: 5,
      // 总记录数
      totalCount: 100,
      // 当前页码
      currentPage: 1,
      dialogFormVisible: false,
      form: {},
      userFormVisible: false,
      userform: {
        image: "",
      },
      tableData: [],
      genderList: [{ id: 1, name: "男" }, { id: 2, name: "女" }],
      searchForm: {
        game_name: "",
        category: ""
      },
      release_date: ""
    };
  },
  methods: {
    userEdit() {
      request.get("/user/" + this.user.id).then((res) => {
        if (res.code === "0") {
          this.userform = res.data;
          this.user = res.data;
          localStorage.setItem("user", JSON.stringify(res.data));
          this.userFormVisible = true;
        }
      })
    },

    edit(obj) {
      this.form = obj;
      this.dialogFormVisible = true;
    },
    successUpload(res) {
      console.log(res);
      this.form.game_image = res.data;
    },
    successUserUpload(res, file) {
      console.log(res);
      console.log(file);
      this.userform.image = res.data;
      this.user.image = res.data;
      localStorage.setItem("user", JSON.stringify(this.user));
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    add() {
      this.form = {};
      this.dialogFormVisible = true;
      this.load();
    },
    userSubmit() {
      request.post("/user", this.userform).then((res) => {
        if (res.code === "0") {
          this.$message.success({ message: "修改成功", type: "success" });
          //更新本地缓存
          /* localStorage.setItem("user", JSON.stringify(res.data)); */
          this.userFormVisible = false;
          this.load();
        } else {
          this.$message({ message: "修改失败", type: "error" });
        }
      });
    },
    submit() {
      request.post("/games", this.form).then((res) => {
        if (res.code === "0") {
          this.$message.success({ message: "修改成功", type: "success" });
          this.dialogFormVisible = false;
          this.load();
        } else {
          this.$message({ message: "修改失败", type: "error" });
        }
      });
    },
    handleDelete(id) {
      request.delete("/games/" + id).then((res) => {
        if (res.code === "0") {
          this.$message.success({ message: "删除成功", type: "success" });
          this.load();
        } else {
          this.$message({ message: "删除失败", type: "error" });
        }
      });
    },
    viewDetails(id) {
      alert("查看详情：" + id);
      // 可以根据 id 加载对应游戏的详情页
    },
    clear() {
      this.searchForm = { game_name: "", category: "" };
      this.load();

      this.page();
    },
    onSubmit() {
      request.get("/games/search", { params: this.searchForm }).then((res) => {
        if (res.code === "0") {
          this.tableData = res.data;
        } else {
          this.$message({ message: "查询失败", type: "error" });
        }
      });
    },
    handleSizeChange(val) {
      alert("每页记录数发生变化" + val);
    },
    handleCurrentChange(val) {
      alert("页码发生变化" + val);
    },
    load() {
      request.get("/games").then((res) => {
        if (res.code === "0") {
          this.tableData = res.data;
        } else {
          alert(res.msg);
        }
      });
    }
  },
  created() {
    this.load();
  },
  mounted() {
    // 页面加载完成后，开始动画
    setTimeout(() => {
      this.wordFlag = true
    }, 200)
  },
  computed: {

  }
};
</script>
  
<style scoped>
@import '../../css/vue.css';
/*引入自定义的css*/
</style> 